<!-- 账号管理 -->
<template>
  <div class="accountPage">
    <div class="container">
      <div class="navBarTitle">
        <div
          class="rentSeeking"
          :class="{ styleColor: currentIndex == 1 }"
          @click="currentIndexBtn"
        >
          个人信息
        </div>
        <div
          class="TakeOn"
          :class="{ styleColor: currentIndex1 == 1 }"
          @click="currentIndexBtn1"
        >
          安全设置
        </div>
      </div>
      <div class="contentList" v-if="currentIndex == 1">
        <div class="userImg">
          <div class="upImg">
            <img v-if="!img_url" :src="userInfo.img_url" class="imgIcon" />
            <img v-if="img_url" :src="img_url" class="imgIcon" />
            <div class="modifyUserImg" @click="upImgdata">
              <div class="modifyuserName">修改头像</div>
            </div>
          </div>
          <div class="userName">{{ userInfo.name }}</div>
        </div>
        <div class="inputList">
          <div class="inputBox">
            <span class="phoneName">手机号码：</span>
            <input v-model="userInfo.phone" class="inputPhone" disabled />
            <!-- <span class="modifyPhone" @click="modifyPhone">修改</span> -->
          </div>
          <div class="userNameInputBox" v-if="userInfo.gender">
            <span class="userNameInput">性别：</span>
            <span class="radioBox">
              <span class="manStyle">{{ userInfo.gender }}</span>
            </span>
          </div>
          <div class="addressBox" v-if="userInfo.address">
            <div class="addressName">地址：</div>
            <div class="inputAddress">
              <!-- <el-input v-model ="addressInput" placeholder="请输入地址" ></el-input> -->
              {{ userInfo.address }}
            </div>
          </div>
          <!-- <div class="addressBox">
            <div class="addressName">邮箱：</div>
            <div class="inputAddress">
              <el-input v-model ="mailboxInput" placeholder="请输入邮箱"></el-input>
            </div>
          </div> -->
        </div>
        <!-- <div class="sunMit">
          <div>保存</div>
          <div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div> -->
      </div>
      <div class="contentBox" v-if="currentIndex1 == 1">
        <div class="modifyPasswordBox">
          <div class="modifyPasswordBoxLeft">
            <div class="loginName">登录密码</div>
            <div class="security">
              安全性高的密码可以使账号更安全，建议您定期更换密码。
            </div>
          </div>
          <div class="modifyPassword" @click="btnPassword">
            <span>修改密码</span>
            <img
              src="./../../../../public/img/success/rightIcon.png"
              class="rightIcon"
            />
          </div>
        </div>
        <!-- <div class="modifyPasswordBox">
            <div class="modifyPasswordBoxLeft">
            <div class="loginName">手机绑定</div>
            <div>
            <div class="security">绑定手机即可享有轰隆隆手机服务，如手机登录、手机找回密码、接收信息等。</div>
            <div class="securityPhone">已绑定手机号：{{userInfo.phone}}</div>
            </div>
            </div>
            <div class="modifyPassword" @click="btnPhone">
              <span>修改手机</span>
              <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
            </div>
          </div> -->
      </div>
      <!-- 修改密码 -->
      <div v-if="isPassword" class="isPassword">
        <div class="isPasswordBox">
          <div class="isPhoneBox1">
            <div class="modifyPhoneName">修改密码</div>
            <div class="phoneBox">
              <span class="inputBorder">+86</span>
              <input
                type="text"
                v-model="userPassPhone"
                placeholder="请输入手机号码"
                class="phoneBoxInput"
                maxlength="11"
              />
            </div>
            <div class="shortInput1Box">
              <input
                :type="pwdType"
                class="shortInput1"
                placeholder="请设置您的登录密码"
                v-model="userPassword"
              />
              <img
                src="./../../../../public/img/personal/pawssword.png"
                class="passwordImg"
                @click="showPwd"
              />
            </div>
            <div class="shortInput2Box">
              <input
                :type="pwdType1"
                class="shortInput2"
                placeholder="请再次输入您的密码"
                v-model="userPassword1"
              />
              <img
                src="./../../../../public/img/personal/pawssword.png"
                class="passwordImg"
                @click="showPwd1"
              />
            </div>
            <div class="shortBox">
              <div>
                <input
                  type="text"
                  class="shortInput"
                  placeholder="请输入手机验证码"
                  v-model="userPasswordShort"
                  maxlength="6"
                />
              </div>
              <div class="getShort" v-show="sendAuthCode" @click="getAuthCode">
                获取短信验证码
              </div>
              <span class="getShort" v-show="!sendAuthCode">
                <span>{{ auth_time }}</span
                >发送验证码
              </span>
            </div>
            <div class="subMit" @click="setPersonalSubmitBtn">确定修改</div>
            <img
              src="./../../../../public/img/personal/deleteIcon.png"
              class="deleteIcon"
              @click="deleteBtn"
            />
          </div>
        </div>
      </div>
      <!-- 修改手机 -->
      <!-- <div v-if="isPhone" class="isPhone">
            <div class="isPhoneBox">
              <div class="modifyPhoneName">修改手机</div>
              <div class="phoneBox">
                <span class="inputBorder">+86</span>
                <input type="text" v-model="userPhone" placeholder="请输入手机号码" class="phoneBoxInput"/>
              </div>
              <div class="shortBox">
                <div>
                <input type="text" class="shortInput" placeholder="请输入手机验证码" v-model="userShort">
                </div>
              <div class="getShort">获取短信验证码</div>
            </div>
              <div class="subMit" @click.stop="subMit">确定修改</div>
              <img src="./../../../../public/img/personal/deleteIcon.png" class="deleteIcon" @click="deleteBtn1">
            </div>
          </div> -->
    </div>
  </div>
</template>

<script >
import {
  getedit,
  setSendcode,
  setPersonalSubmit,
} from "./../../../apis/api.js";
const msgTime = 59;
let inputElement = null;
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  inject: ["reload"],
  data() {
    // 这里存放数据
    return {
      auth_time: msgTime,
      sendAuthCode: true,
      resendTimer: null,
      userInfo: {},
      currentIndex: 1, //个人信息
      currentIndex1: -1, //安全设置
      inputPhone: "", // 手机号
      radio: "1", //男女
      addressInput: "", // 地址
      mailboxInput: "", //邮箱
      isPassword: false,
      isPhone: false,
      pwdType: "password",
      pwdType1: "password",
      userPassPhone: "", //修改密码的手机号
      userPassword: "", //修改密码
      userPassword1: "", //修改密码
      userPasswordShort: "", //修改密码的验证码
      userPhone: "", //修改手机号码
      userShort: "", //修改手机验证码
      img_url: "", //修改头像
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    // 监听缓存变化
    userInfo: {
      // 默认写成函数，就相当于写了个handler(),deep:true,是否深度监控
      handler() {
        // localStorage 默认存的是字符串
        localStorage.getItem("userInfo");
      },
      deep: true,
    },
  },
  // 方法集合
  methods: {
    // 个人信息
    currentIndexBtn() {
      this.currentIndex = 1;
      this.currentIndex1 = -1;
    },
    // 安全设置
    currentIndexBtn1() {
      this.currentIndex1 = 1;
      this.currentIndex = -1;
    },
    btnPassword() {
      this.isPassword = true;
    },
    btnPhone() {
      this.isPhone = true;
    },
    subMit() {
      this.isPhone = false;
    },
    // 星号显示密码
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    // 星号显示密码
    showPwd1() {
      if (this.pwdType1 === "password") {
        this.pwdType1 = "";
      } else {
        this.pwdType1 = "password";
      }
    },
    // 修改手机号码
    modifyPhone() {
      this.currentIndex1 = 1;
      this.currentIndex = -1;
      this.isPhone = true;
    },
    deleteBtn() {
      this.isPassword = false;
    },
    deleteBtn1() {
      this.isPhone = false;
    },
    //上传图片
    upImgdata() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile1, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile1);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
    // 上传图片
    uploadFile1(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        const files = el.target.files[0];
        const isLt10M = files.size / 1024 / 1024 < 10;
        const size = files.size / 1024 / 1024;
        // 判断上传文件的大小
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.$message.error("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            // 数据传到后台
            const formData = new FormData();
            formData.append("file", files); // 可以传到后台的数据
            that.getedit(formData);
          };
        }
      }
    },
    // 修改头像
    async getedit(file) {
      let res = await getedit(file);
      if (res.data.result == "1") {
        this.img_url = res.data.body.img_url;
        this.userInfo.img_url = this.img_url;
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        this.$message.success("修改成功");
        setTimeout(() => {
          this.reload(); // 刷新当前页面
        }, 1000);
      }
    },
    // 手机号校验
    varifyPhoneNum(phoneNum) {
      if (!phoneNum) return false;
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!myreg.test(phoneNum)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    async getAuthCode() {
      if (this.userPassPhone == "" || this.userPassPhone == undefined) {
        this.$message.error("请填写手机号码！");
        return;
      }
      let base64phoneNumber = this.userPassPhone;
      if (!this.varifyPhoneNum(this.userPassPhone)) {
        return false;
      }
      this.sendAuthCode = false;
      let params = {
        phone: base64phoneNumber,
      };
      try {
        let res = await setSendcode(params);
        this.resendTimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            this.auth_time = msgTime;
            clearInterval(this.resendTimer);
          }
        }, 1000);
        if (res.data.result === 1) {
          this.$message.success("验证码已发送！");
        } else {
          this.$message.error(res.data.message);
        }
      } catch (e) {
        this.resendTimer = setInterval(() => {
          this.auth_time--;
          if (this.auth_time <= 0) {
            this.sendAuthCode = true;
            this.auth_time = msgTime;
            clearInterval(this.resendTimer);
          }
        }, 1000);
      }
    },
    //重置密码-提交更新密码
    async setPersonalSubmitBtn() {
      let that = this;
      if (this.userPassPhone == "" || this.userPassPhone == undefined) {
        this.$message.error("请填写手机号码！");
        return;
      }
      if (this.userPassword == "" || this.userPassword == undefined) {
        this.$message.error("请填写密码！");
        return;
      }
      if (this.userPassword1 == "" || this.userPassword1 == undefined) {
        this.$message.error("请再次填写密码！");
        return;
      }
      if (this.userPassword1 == "" || this.userPassword1 == undefined) {
        this.$message.error("请再次填写密码！");
        return;
      }
      if (this.userPassword != this.userPassword1) {
        this.$message.error("输入密码不一致，请确认输入密码！");
        return;
      }
      if (this.userPasswordShort == "") {
        this.$message.error("请输入手机验证码！");
        return;
      }
      let data = {
        phone: this.userPassPhone,
        pwd: this.userPassword,
        code: this.userPasswordShort,
      };
      console.log("11111111");
      let res = await setPersonalSubmit(data);
      if (res.data.result == "1") {
        console.log("111122323");
        that.isPassword = false;
        this.$message.success("修改成功！");
        that.userPassPhone == "";
        that.userPassword == "";
        that.userPassword1 == "";
        that.userPasswordShort == "";
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.container {
  width: 920px;
  margin-left: 20px;
}
.navBarTitle {
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #ffffff;
}
.navBarTitle {
  display: flex;
}
.rentSeeking {
  margin-left: 20px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.TakeOn {
  margin-left: 20px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.styleColor {
  color: #ff7d59;
  font-size: 16px;
  cursor: pointer;
}
.contentList {
  margin-top: 20px;
  width: 920px;
  height: 602px;
  background: #ffffff;
}
.userImg {
  padding-top: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.upImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
}
.modifyUserImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  color: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.modifyuserName {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.userName {
  margin-top: 10px;
}
.imgIcon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.inputList {
  margin-top: 30px;
  margin-left: 30px;
}
.inputBox {
  padding-top: 30px;
  box-sizing: border-box;
}
.phoneName {
  font-size: 14px;
  color: #999;
}
.inputPhone {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25px;
  line-height: 25px;
  margin-left: 30px;
  color: #333;
  font-size: 14px;
}
.modifyPhone {
  font-size: 14px;
  color: #ff7d59;
  margin-left: 10px;
  cursor: pointer;
}
.userNameInput {
  margin-top: 39px;
  font-size: 14px;
  color: #999;
  span {
    color: red;
    font-size: 14px;
  }
}
.userNameInputBox {
  margin-top: 39px;
}
.radioBox {
  margin-left: 58px;
}
.addressBox {
  margin-top: 39px;
  display: flex;
  align-items: center;
}
.addressName {
  font-size: 14px;
  color: #999;
}
.inputAddress {
  width: 684px;
  margin-left: 59px;
  font-size: 14px;
  color: #333;
}
.rightIcon {
  width: 37px;
  height: 11px;
  margin-left: 11px;
}
.sunMit {
  display: flex;
  justify-content: center;
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  margin-left: 120px;
  margin-top: 40px;
}
.contentBox {
  width: 920px;
  // height: 190px;
  height: 110px;
  background: #ffffff;
  margin-top: 20px;
}
.modifyPasswordBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 30px 0 30px;
  padding-top: 35px;
  box-sizing: border-box;
}
.modifyPasswordBoxLeft {
  display: flex;
}
.security {
  margin-left: 30px;
  font-size: 14px;
  color: #333;
}
.loginName {
  font-size: 14px;
  color: #999;
}
.modifyPassword {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.securityPhone {
  margin-top: 10px;
  margin-left: 30px;
  font-size: 14px;
  color: #333;
}
.isPassword {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.isPhone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.isPhoneBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 410px;
  height: 391px;
  background: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 200;
}
.isPhoneBox1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 410px;
  height: 500px;
  background: #ffffff;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 200;
}
.phoneBox {
  display: flex;
  align-items: center;
  margin-top: 15px;
  margin-left: 75px;
}
.inputBorder {
  width: 30px;
  height: 34px;
  line-height: 34px;
  color: #999;
  border: 1px solid #d7d7d7;
  border-right: none;
  text-align: center;
}
.phoneBoxInput {
  width: 217px;
  height: 34px;
  border: 1px solid #d7d7d7;
  padding-left: 10px;
}
.modifyPhoneName {
  padding-top: 60px;
  margin-left: 75px;
  box-sizing: border-box;
  color: #2a303c;
  font-size: 18px;
  font-weight: 600;
}
.shortBox {
  display: flex;
  align-items: center;
  margin-left: 75px;
  margin-top: 20px;
}
.shortInput {
  width: 130px;
  height: 34px;
  border: 1px solid #d7d7d7;
  color: #333;
  padding-left: 10px;
  box-sizing: border-box;
}
.shortInput1 {
  margin: 20px auto 0 auto;
  width: 260px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #d7d7d7;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.shortInput1Box {
  display: flex;
  justify-content: center;
  position: relative;
}
.shortInput2Box {
  display: flex;
  justify-content: center;
  position: relative;
}
.shortInput2 {
  margin: 20px auto 0 auto;
  width: 260px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #d7d7d7;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.getShort {
  width: 120px;
  height: 34px;
  line-height: 34px;
  background: #fdf0e5;
  color: #ff7d59;
  font-size: 12px;
  text-align: center;
  margin-left: 10px;
  cursor: pointer;
}
.subMit {
  margin: 30px auto 0 auto;
  width: 260px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.passwordImg {
  width: 8px;
  height: 16px;
  position: absolute;
  top: 30px;
  right: 85px;
  cursor: pointer;
}
.deleteIcon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.manStyle {
  font-size: 14px;
  color: #333;
}
</style>
